"use client";
import dynamic from 'next/dynamic';
import { useEffect, useRef,useState } from 'react';


export default function BlogForceGraphV1() {
    const ForceGraph3D = dynamic(
        () => import('react-force-graph').then(mod => mod.ForceGraph2D),
        {
            ssr: false, // 确保组件仅在客户端渲染
        }
    );

    const clusterIds = [1]

    const [initialCenter, setInitialCenter] = useState(true);
    const [collapsedClusters, setCollapsedClusters] = useState(clusterIds);
    const [hiddenClusters, setHiddenClusters] = useState([]);
    const forceRef = useRef();



    const toggleClusterCollapse = (clusterId) => {
        if (collapsedClusters.includes(clusterId)) {
            setCollapsedClusters(collapsedClusters.filter((id) => id !== clusterId));
        } else {
            setCollapsedClusters([...collapsedClusters, clusterId]);
        }
    };

    const handleNodeClick = (node) => {
        toggleClusterCollapse(node.id);
        if (collapsedClusters.includes(node.id)) {
            forceRef.current.zoom(3.5, 400);
            forceRef.current.centerAt(node.x, node.y, 400);
        }
    };

    const toggleCluster = (clusterId) => {
        if (hiddenClusters.includes(clusterId)) {
            setHiddenClusters(hiddenClusters.filter((id) => id !== clusterId));
        } else {
            setHiddenClusters([...hiddenClusters, clusterId]);
        }
        if (!collapsedClusters.includes(clusterId)) {
            toggleClusterCollapse(clusterId);
        }
    };



    const graphData = {
        "nodes": [
            { "id": "node1", "label": "Node 1", "value": 10, "group": 1 },
            { "id": "node2", "label": "Node 2", "value": 20, "group": 2 },
            { "id": "node3", "label": "Node 3", "value": 15, "group": 1 },
            { "id": "node4", "label": "Node 4", "value": 30, "group": 2 },
            { "id": "node5", "label": "Node 5", "value": 5, "group": 3 }
        ],
        "links": [
            { "source": "node1", "target": "node2" },
            { "source": "node1", "target": "node3" },
            { "source": "node2", "target": "node4" },
            { "source": "node3", "target": "node4" },
            { "source": "node5", "target": "node1" }
        ]
    };
    // 自定义节点标签的渲染函数
    const safeNodeLabel = ({ node }) => {
        // 检查 node 是否是有效的对象
        console.log(node)
        return node ? node.id : 'Unknown';
    };


    return <>
        <div className='w-full justify-center' ref={forceRef}>
            <ForceGraph3D
               
                height={650}
                ref={forceRef}
                onNodeClick={handleNodeClick}
                graphData={graphData}
                cooldownTicks={50}
                nodeRelSize={1}
         
                nodeCanvasObjectMode={() => "after"}
                nodeCanvasObject={(node, ctx, globalScale) => {
                    const label = node.name;
                    const fontSize = node.isClusterNode
                        ? 14 * (node.val / 1500)
                        : 14 / (globalScale * 1.2);
                    ctx.font = `${fontSize}px Sans-Serif`;
                    ctx.textAlign = "center";
                    ctx.textBaseline = "middle";
                    ctx.fillStyle = node.isClusterNode ? "white" : "black"; //node.color;
                    if (node.isClusterNode) {
                        // console.log();
                        const lineHeight = fontSize * 1.2;
                        const lines = label.split(",");
                        let x = node.x;
                        let y = node.y - lineHeight;
                        for (let i = 0; i < lines.length; ++i) {
                            ctx.fillText(lines[i], x, y);
                            y += lineHeight;
                        }
                    } else if (globalScale >= 3.5) {
                        ctx.fillText(label, node.x, node.y + 2.5);
                    }
                }}
                enableNodeDrag={false}
                nodeVisibility={(node) => {
                    if (collapsedClusters.includes(node.clusterId)) {
                        return false;
                    } else return true;
                }}
                linkVisibility={(link) => {
                    if (
                        collapsedClusters.includes(link.source.id) &&
                        !link.target.isClusterNode
                    ) {
                        return false;
                    } else if (
                        hiddenClusters.includes(link.source.id) ||
                        hiddenClusters.includes(link.target.id)
                    ) {
                        return false;
                    } else return true;
                }}
            />
        </div>

    </>
}